<template>
    <div class="hospital">
        <div class="hospitalinfoCon">
            <div v-if="hospitalinfo">
                <div class="hospitalinfoConImg">
                    <input type="file" @change="getFile($event)" />
                    <img :src="SrcImg" v-if="SrcImg!='null'&&SrcImg!='undefined'" ref="Hicon" id="MyMessagePortrait" />
                </div>
                <div>
                    <el-form ref="hospitalinfo">
                        <el-form-item label="医院名" label-width="100px">
                            <el-input v-model="hospitalinfo.name" />
                        </el-form-item>         
                        <el-form-item label="院长" label-width="100px">
                            <el-input v-model="hospitalinfo.deanName" />
                        </el-form-item>
                        <el-form-item label="寄养负责人" label-width="100px">
                            <el-input v-model="hospitalinfo.fsupers" />
                        </el-form-item>
                        <el-form-item label="寄养电话" label-width="100px">
                            <el-input v-model="hospitalinfo.fiphone" />
                        </el-form-item>
                        <el-form-item label="科室负责人" label-width="100px">
                            <el-input v-model="hospitalinfo.dsupers" />
                        </el-form-item>
                        <el-form-item label="科室电话" label-width="100px">
                            <el-input v-model="hospitalinfo.diphone" />
                        </el-form-item>
                        <el-form-item label="电话号" label-width="100px">
                            <el-input v-model="hospitalinfo.iphone" />
                        </el-form-item>
                        <el-form-item label="地址" label-width="100px">
                            <el-input @focus="selectArea" v-model="hospitalinfo.address" />
                        </el-form-item>
                        <el-form-item label="简介" label-width="100px">
                            <el-input v-model="hospitalinfo.synopsis" type="textarea"  />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">修改</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div v-else>
                <el-skeleton :rows="5" animated style="width: 50%" />
            </div>
        </div>
        <el-dialog
            v-model="dialogVisible"
            title="选择地点"
            width="30%"
            height="300px"
        >
           <div class="map">
                <Map @addr="Getaddr($event)" :Area="dialogVisible"></Map>
           </div>
        </el-dialog>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance} from 'vue'
import { ElMessageBox,ElMessage  } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex' 
import Map from './assist/map'
import Top from '@/components/page/menu/top'
export default defineComponent({
    components:{
        Map,
        Top
    },
    data(){
        return{
            dialogVisible:false,
            user:null,
            hospitalinfo:null,
            SrcImg:null,
            fromData:{
                "name":'',
                "images":"",
                "deanName":"",
                "fsupers":'',
                "dsupers":"",
                "fiphone":'',
                "diphone":'',
                "iphone":'',
                "address":'',
                "synopsis":''
            }
        }
    },
    created () {
        this.user = this.store.state.UserMessage;
        if(this.user==null) return;
        this.LoadData();
    },
    setup() {
        // 路由
        const route = useRouter();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            route,
            store
        } 
    },
    methods:{
        LoadData(){
            let self = this;
            self.$http.get(`${self.baseUrl}/hospital/selectId?id=1`).then(res=>{
                self.hospitalinfo = res.data;
            })
        },
        selectArea(){
            this.dialogVisible = true;
        },
        getFile(msg){
            let self = this;
            let file = msg.target.files[0];
            self.hospitalinfo.images = file;
            const reader = new FileReader();
            reader.onload = function(e){
                self.SrcImg = e.target.result;
            }
            reader.readAsDataURL(file);
        },
        Getaddr(msg){
            let { lng,lat} = msg.point;
            this.hospitalinfo.address = `${msg.address}-${msg.title}`;
            this.hospitalinfo.lal = `[${lng},${lat}]`
        },
        deleteClick(msg){
            let self = this;
            ElMessageBox.confirm(`确定要删除此${this.hospitalinfo.name}用户吗？`,'删除',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
            }).then(() => {
                self.$http.get(`${self.baseUrl}/hospital/deleteHospital?id=${self.hospitalinfo.id}`).then(res=>{
                    if(res.data!=0){
                        ElMessage({
                            message:"删除成功",
                            type:'success'
                        })
                        self.LoadData()
                    }else{
                        ElMessage({
                            message:"删除失败",
                            type:'error'
                        })
                    }
                })
            }).catch(() => {})
        },
        onSubmit(){
            let self = this;
            let f = new FormData();
            f.append("id",self.hospitalinfo.id);
            f.append("name",self.hospitalinfo.name);
            if(self.hospitalinfo.images!=null) f.append("images",self.hospitalinfo.images);
            f.append("deanName",self.hospitalinfo.deanName);
            f.append("fSupers",self.hospitalinfo.fsupers);
            f.append("dSupers",self.hospitalinfo.dsupers);
            f.append("fIphone",self.hospitalinfo.fiphone);
            f.append("dIphone",self.hospitalinfo.diphone);
            f.append("iphone",self.hospitalinfo.iphone);
            f.append("address",self.hospitalinfo.address);
            f.append("LAL",self.hospitalinfo.lal);
            f.append("synopsis",self.hospitalinfo.synopsis);
            self.$http.post(`${self.baseUrl}/hospital/updateHospital`,f).then(res=>{
                if(res.data==1){
                    ElMessage({
                        message:"修改成功,重新登录生效",
                        type:'success'
                    })
                }
            })
        }
    }
})
</script>
<style scoped>
    .hospitalinfoCon{
        margin-top: 46px;
    }
    .hospitalinfoConImg{
        width: 30%;
        float: right;
        margin: 0 74px 20px 20px;
        min-height: 300px;
        position: relative;
        background-repeat: round;
        border-radius: 10px;
        background-size: 300px 300px;
        border: 1px dashed #ccc;
    }
    .hospitalinfoConImg input{
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
    }

    .map{
        width: 100%;
        height: 300px;
    }
</style>
